import { Component } from 'react'
import { Card, Avatar, Icon } from 'antd'
const { Meta } = Card;

const pict = {
  0: '/image/banner/5.jpg',
  1: '/image/banner/1.jpg',
  2: '/image/banner/2.jpg',
  3: '/image/banner/3.jpg',
  4: '/image/banner/4.jpg',
}
function showWechat () {
  avatar = ''
}
class MyCard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      avatar: "/image/avatar.jpg"
    }
  }

  showWechat = () => {
    this.setState({
      avatar: '/image/qrcode.png',
    })
  }

  hideWechat = () => {
    this.setState({
      avatar: '/image/avatar.jpg'
    })
  }

  render () {
    const { avatar } = this.state
    const { current } = this.props;
    return (
      <Card
        style={{ width: '100%' }}
        hoverable="true"
        cover={
          <img
            alt="example"
            src={pict[current]}
          />
        }
        actions={[
          <Icon type="like" key="like" />,
          <Icon onMouseEnter={() => this.showWechat()} onMouseLeave={() => this.hideWechat()} type="wechat" key="wechat" />,
        ]}
      >
        <Meta
          avatar={<Avatar src={pict[current]} />}
          title="小赫兹"
          description="一入前端深似海"
        />
        <style>{`
  
        `}</style>
      </Card >
    )
  }
}
export default MyCard
